<template>
  <div class="studio-layout">
    <div class="main-header">
      <div class="logo" style="flex-grow: 0;">
        <img src="../../assets/logo.png" alt="" style="height: 40px;margin-top:4px"/>
      </div>
      <div class="main-menu">
        <el-dropdown trigger="click" @command="languageChange">
          <el-icon><ReadingLamp /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="l in languages" :command="l.value" >{{l.label}}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-avatar style="vertical-align: middle;" size="small"
                   src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"/>
      </div>
    </div>
    <div class="main-sub-toolbar">
      <div style="flex-grow: 1;align-items:center;">
        <el-menu
            style="height: 38px;border-bottom: none;"
            mode="horizontal"
            :collapse="false"
            :unique-opened="true"
            :router="false"
            :collapse-transition="true"
            :default-active="currentMenu"
        >
          <el-menu-item v-for="(menu) in menus" :key="menu.name" :index="menu.name"
                        @click="changeCurrentMenu(menu)">
            {{ locale.studio[menu.meta.title] }}
          </el-menu-item>
        </el-menu>
      </div>
      <div class="sub-menu">
        <span>{{ locale.studio.clearCache }}</span>
      </div>
    </div>
    <div class="main-content">
      <RouterView v-slot="{ Component }">
        <KeepAlive>
          <component :is="Component" :key="$route.name"/>
        </KeepAlive>
      </RouterView>
    </div>
  </div>
</template>
<script>
import './studio-layout.less'
import {StudioRouter} from "./index";
import {getSelectedTopMenu} from "@/utils";
import {studioRouterPathPrefix} from "./index";
import YvI18nMixin from "@/components/YvI18nMixin";
import {ReadingLamp} from '@element-plus/icons-vue'
import {renderIcon} from '@/components/web/webutils'

export default {
  components: {ReadingLamp},
  mixins: [YvI18nMixin],
  data() {
    return {
      menus: StudioRouter,
      currentMenu: 'home',
      languages: [
        {label: '中文', value: 'zh-cn'},
        {label: 'English', value: 'en'},
      ]
    }
  },
  mounted() {
    this.currentMenu = getSelectedTopMenu(this.$route)
  },
  methods: {
    renderIcon,
    languageChange(value) {
      this.i18nChangeLanguage(value)
    },
    changeCurrentMenu(menu) {
      this.currentMenu = menu.name

      // 从当前路由跳转到指定路由，并附加前缀
      this.$router.push(studioRouterPathPrefix.value + menu.path)
    }
  }
}
</script>